<template>
	<div style="max-width: 1200px;margin: 0 auto;">
		<div class="pb10px">
			<el-form ref="searchForm" :model="searchForm" inline>
				<el-form-item label="考试名称" prop="name">
					<el-input v-model="searchForm.name" clearable placeholder="请输入考试名称"></el-input>
				</el-form-item>
				<el-form-item label="">
					<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜 索
					</el-button>
					<el-button icon="el-icon-refresh-left" @click="resetForm">重 置</el-button>
				</el-form-item>
			</el-form>
		</div>
		</el-button>
		<el-table ref="multipleTable" :data="listData" tooltip-effect="dark" style="width: 100%"
			:header-cell-style="headClass" :cell-style="rowClass">
			<el-table-column type="index" width="55" label="序号"></el-table-column>
			<el-table-column prop="name" label="考试名称"></el-table-column>
			<el-table-column prop="startTime" label="开始时间"></el-table-column>
			<el-table-column prop="endTime" label="结束时间"></el-table-column>
			<!-- <el-table-column prop="score" label="分数">
				<template slot-scope="scope">
					<div v-if="scope.row.isScore == '已评分'">{{scope.row.score}}</div>
					<div v-else>
						暂无成绩
					</div>
				</template>
			</el-table-column> -->
			</el-table-column>
			<el-table-column label="操作" width="200" fixed="right">
				<template slot-scope="scope">
					<el-button type="primary" icon="el-icon-view"
						@click="handleEdit(scope.row.id,scope.row.isSeeScore)">
						查看成绩
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div style="margin-top: 20px">
			<el-pagination @current-change="currentChange" @size-change="sizeChange" :page-size="pageInfo.pageSize"
				:current-page="pageInfo.currentPage" background layout="sizes, prev, pager, next" :total="total">
			</el-pagination>
		</div>
		<el-dialog :title="'考试名称:' + tableData.name" :visible.sync="dialogTableVisible">
			<div class="paperContont">
				<div class="userBox">
					<div style="font-size: 18px;">考生: <span
							style="font-size: 20px;font-weight: bold;">{{tableData.userName}}</span></div>
					<div style="font-size: 18px;">总分: <span
							style="color: #F56C6C;font-size: 40px;">{{tableData.score}}</span></div>
				</div>
				<div class="pointBox">
					<div class="pointSmollBox">
						<div style="color:#b1b1bb;font-size:20px;padding: 10px 0px;">客观题得分</div>
						<div style="color:red;font-size:28px;">{{keguanPoint}}</div>
					</div>
					<div class="pointSmollBox">
						<div style="color:#b1b1bb;font-size:20px;padding: 10px 0px;">答对</div>
						<div style="color:#ffb901;font-size:28px;">{{rightNum}}题</div>
					</div>
					<div class="pointSmollBox">
						<div style="color:#b1b1bb;font-size:20px;padding: 10px 0px;">答错</div>
						<div style="color:#b4b4b4;font-size:28px;">{{errNum}}题</div>
					</div>
					<div class="pointSmollBox">
						<div style="color:#b1b1bb;font-size:20px;padding: 10px 0px;">正确率</div>
						<div style="color:#7cb67f;font-size:28px;">{{rightPoint}}%</div>
					</div>
					<div class="pointSmollBox">
						<div style="color:#b1b1bb;font-size:20px;padding: 10px 0px;">主观题得分</div>
						<div style="color:red;font-size:28px;">{{zhuguanPoint}}</div>
					</div>
				</div>
				<div class="topicBox" v-for="(item,index) in userAnswers">
					<div style="background-color: #faf9fe;width: 100%;display: flex;flex-direction: row;justify-content: space-between;"
						:id="item.id">
						<div class="topicTitle">
							<div>{{index + 1}}、{{item.type}}</div>
							<div class="scoreBox">
								<el-tag size="medium">分值:{{item.score}}分</el-tag>
							</div>
						</div>
					</div>
					<div class="topicConBox">
						<div class="topicWord">{{item.name}}</div>
						<div class="checkBoxList" v-if="item.type == '单项选择题'">
							<div class="blueBox">答</div>
							<el-radio-group v-model="item.userAnswer">
								<div v-for="j in item.options">
									<el-radio :label="j.value" border size="medium"
										:disabled='j.value != item.userAnswer'>{{j.label}}.{{j.value}}</el-radio>
								</div>
							</el-radio-group>
						</div>
						<div class="checkBoxList" v-if="item.type == '多项选择题'">
							<div class="blueBox">答</div>
							<el-checkbox-group v-model="item.userAnswer">
								<div v-for="j in item.options">
									<el-checkbox :label="j.value" border :disabled='!j.ischeck' size="medium">
										{{j.label}}.{{j.value}}
									</el-checkbox>
								</div>
							</el-checkbox-group>
						</div>

						<div class="checkBoxList" v-if="item.type == '判断题'">
							<div class="blueBox">答</div>
							<el-radio-group v-model="item.userAnswer">
								<div v-for="j in tfOptions">
									<el-radio :label="j.name" border size="medium"
										:disabled='j.name != item.userAnswer'>{{j.name}}</el-radio>
								</div>
							</el-radio-group>
						</div>
						<div class="inputBox" v-if="item.type == '填空题' || item.type == '简答题'">
							<div class="blueBox">答</div>
							<el-input type="textarea" :rows="3" placeholder="请输入内容" disabled v-model="item.userAnswer">
							</el-input>
						</div>
					</div>
					<div class="botBox">
						<div v-if="item.type != '简答题'" style="font-size: 16px;">正确答案: <span
								style="font-size: 20px;font-weight:bold;color:#F56C6C;">{{item.answer}}</span></div>
						<div v-if="item.type == '简答题'"></div>
						<div v-if="item.type != '简答题'"
							style="margin-top: -80px;z-index: 999;position: absolute;margin-left:75%;">
							<div v-if="item.score == item.userScore">
								<img src="../../assets/right.png" alt="" style="width: 60px;">
							</div>
							<div v-else-if="item.score != item.userScore">
								<img src="../../assets/error.png" alt="" style="width: 60px;">
							</div>
						</div>
						<div style="font-size: 16px;">得分: <span
								style="font-size: 20px;color:#F56C6C;">{{item.userScore}}</span></div>
					</div>
					<div class="checkBoxList">
						<el-collapse accordion>
							<el-collapse-item title="查看解析">
								<div>{{item.analysis}}</div>
								<!-- <div v-if="item.analysis == null">暂无解析</div> -->
							</el-collapse-item>
						</el-collapse>
					</div>
				</div>
			</div>
		</el-dialog>

		<el-dialog title="查看分数" :visible.sync="dialogScore">
			<div class="scoreName">
				<div class="usernameBox">考生:{{tableData.userName}}</div>
				<el-divider></el-divider>
				<div class="testTitle">「{{tableData.name}}」</div>
				<div style="font-size: 18px;padding: 10px 10px;">您本次考试获得</div>
				<div style="font-size: 50px;width: 100%;text-align: center;color: red;">{{tableData.score}}分</div>
				<el-divider></el-divider>
				<div class="pointBox">
					<div class="pointSmollBox">
						<div style="color:#b1b1bb;font-size:20px;padding: 10px 0px;">客观题得分</div>
						<div style="color:red;font-size:28px;">{{keguanPoint}}</div>
					</div>
					<div class="pointSmollBox">
						<div style="color:#b1b1bb;font-size:20px;padding: 10px 0px;">答对</div>
						<div style="color:#ffb901;font-size:28px;">{{rightNum}}题</div>
					</div>
					<div class="pointSmollBox">
						<div style="color:#b1b1bb;font-size:20px;padding: 10px 0px;">答错</div>
						<div style="color:#b4b4b4;font-size:28px;">{{errNum}}题</div>
					</div>
					<div class="pointSmollBox">
						<div style="color:#b1b1bb;font-size:20px;padding: 10px 0px;">正确率</div>
						<div style="color:#7cb67f;font-size:28px;">{{rightPoint}}%</div>
					</div>
					<div class="pointSmollBox">
						<div style="color:#b1b1bb;font-size:20px;padding: 10px 0px;">主观题得分</div>
						<div style="color:red;font-size:28px;">{{zhuguanPoint}}</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//抽屉控制
				isDrawerDialog: false,
				dialogTableVisible: false,
				//列表数据
				listData: [],
				rightPoint:0,
				username:'',
				dialogScore: false,
				tableData: [],
				chooseId: '',
				flag:false,
				userPaper: [],
				userAnswers: [],
				keguanPoint:0,
				zhuguanPoint:0,
				rightNum:0,
				errNum:0,
				userAnswersList:[],
				tfOptions: [{
						id: 1,
						name: '对',
					},
					{
						id: 2,
						name: '错',
					},
				],
				//总条数
				total: 0,
				//分页详情
				pageInfo: {
					//当前页
					pageNum: 1,
					//分页大小
					pageSize: 10
				},
				//搜索
				searchForm: {
					name: "",
					pageNum: 1,
					//分页大小
					pageSize: 10
				},
				formData: {},
				ids: []
			}
		},

		created() {
			this.getPageList()
		},
		methods: {
			//获取分页数据
			getPageList() {
				console.log(this.searchForm)
				this.$axios.get("/exam/userFindPage", {
					params: this.searchForm
				}).then(res => {
					console.log(res)
					this.listData = res.data.list
					this.total = res.data.total
				})
			},
			getUserFindPage() {
				this.keguanPoint = 0
				this.zhuguanPoint = 0
				this.rightNum = 0
				this.errNum = 0
				this.rightPoint =0
				this.$axios.get("/score/getByExamId?id=" + this.chooseId).then(res => {
					if(res.msg == '未评分'){
						this.flag = false
					}else{
						this.flag = true
					}
					if (res.data != null) {
						this.tableData = res.data
						this.userAnswersList = JSON.parse(this.tableData.userAnswers)
						console.log(this.userAnswersList,1123)
						this.userAnswersList.forEach(item=>{
							if(item.type != '简答题'){
								this.keguanPoint += item.userScore
								if(item.userScore != 0){
									this.rightNum += 1
								}else{
									this.errNum += 1
								}
							}else{
								this.zhuguanPoint += item.userScore
							}
						})
						this.rightPoint = Math.floor(this.rightNum/(this.rightNum + this.errNum)*100)
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			resetForm() {
				this.$refs['searchForm'].resetFields();
			},
			//选择分页
			currentChange(e) {
				this.pageInfo.pageNum = e
				this.getPageList()
			},
			headClass() { //表头居中显示
				return "text-align:center;font-size:14px;"
			},
			rowClass() { //表格数据居中显示
				return "text-align:center;font-size:13px;"
			},
			//改变分页数量
			sizeChange(e) {
				this.pageInfo.pageSize = e
				this.getPageList()
			},
			//搜索
			handleSearch() {
				this.pageInfo.pageNum = 1
				this.getPageList()
			},
			//添加数据
			handleAdd() {
				this.formData = {}
				this.isDrawerDialog = true
			},
			//查看成绩
			handleEdit(id, isSee) {
			
				this.chooseId = id
				if (isSee == '0') {
					this.$message.error('成绩暂未公布!')
				} else if (isSee == '1') {
					this.getUserFindPage()
					if (this.flag == true) {
						this.dialogScore = true
					}
				} else if (isSee == '2') {
					this.getUserFindPage()
					if (this.flag == true) {
						this.showPaper()
					}
					// this.userPaper = this.tableData.find(obj => obj.id == id)
					// console.log(this.userPaper,998)
					// 	this.userAnswers = JSON.parse(this.userPaper.userAnswers)
					// 	this.userAnswers.forEach(item => {
					// 		if (item.type == '多项选择题') {
					// 			item.answer = JSON.parse(item.answer)
					// 			item.options.forEach(j => {
					// 				if (item.userAnswer.indexOf(j.value) != -1) {
					// 					j.ischeck = true
					// 				} else {
					// 					j.ischeck = false
					// 				}
					// 			})
					// 		}
					// 	})
					// 	this.dialogTableVisible = true
				}
			},
			showPaper() {
				this.userAnswers = this.userAnswersList
				this.userAnswers.forEach(item => {
					if (item.type == '多项选择题') {
						item.answer = JSON.parse(item.answer)
						item.options.forEach(j => {
							if (item.userAnswer.indexOf(j.value) != -1) {
								j.ischeck = true
							} else {
								j.ischeck = false
							}
						})
					}
				})
				this.dialogTableVisible = true
			},
			contentChange(e) {
				this.$set(this.formData, "content", e)
			},
			uploadImgSuccess(res) {
				this.$set(this.formData, "img", res.data.url)
			}

		}
	};
</script>

<style scoped>
	.footer {
		display: flex;
		justify-content: space-around;
	}
	
	.pointBox{
		display: flex;
		flex-direction: row;
	}
	
	.pointSmollBox{
		width: 20%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.usernameBox{
		font-size: 18px;
		padding: 10px 10px 0px 10px;
	}
	
	.testTitle{
		font-size: 22px;
		font-weight: bold;
	}
	
	.scoreName{
		padding: 10px;
		border: solid 1px gainsboro;
	}

	.paperContont {
		/* min-width: 300px;
		max-height: calc(100vh - 350px);
		overflow-y: scroll; */
	}

	.userBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 95%;
		margin: 0 auto;
	}

	.botBox {
		width: 95%;
		margin: 20px auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.blueBoxBG {
		border: solid 1px #409EFF;
		width: 32px;
		height: 32px;
		border-radius: 5px;
		text-align: center;
		line-height: 30px;
		color: white;
		margin: 0 20px 0 0;
		background-color: #409EFF;
	}

	.blueBox {
		border: solid 1px #409EFF;
		width: 32px;
		height: 32px;
		border-radius: 5px;
		text-align: center;
		line-height: 30px;
		color: #409EFF;
		margin: 0 20px 0 0;
	}

	.el-radio-group {
		width: 100%;
	}

	.el-radio-group .el-radio:last-child {
		width: 100%;
		margin-bottom: 10px;
	}

	.el-checkbox.is-bordered.el-checkbox--mini {
		width: 100%;
		margin-bottom: 10px;
	}

	.el-checkbox-group {
		width: 100%;
	}

	.topicBox {
		width: 95%;
		margin: 20px auto;
		border: solid 1px gainsboro;
		display: flex;
		flex-direction: column;
	}

	.greenBox {
		width: 95%;
		margin: 20px auto;
		border: solid 1px #67C23A;
		display: flex;
		flex-direction: column;
		border-radius: 5px;
		overflow: hidden;
	}

	.redBox {
		width: 95%;
		margin: 20px auto;
		border: solid 1px #F56C6C;
		display: flex;
		flex-direction: column;
		border-radius: 5px;
		overflow: hidden;
	}

	.checkBoxList {
		padding: 10px 20px 10px 20px;
		display: flex;
		flex-direction: row;
	}

	.inputBox {
		padding: 10px 20px 10px 20px;
		display: flex;
		flex-direction: row;
		margin: 10 auto;
	}

	.topicConBox {
		width: 100%;
	}

	.topicWord {
		padding: 10px 20px 10px 20px;
	}

	.scoreBox {
		margin: 0px 10px 0px 10px;
	}

	.topicTitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 20px 10px 20px;
	}
</style>
